<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-row :gutter="0" style="margin-left:60px;">
      <el-form
        ref="queryParasms"
        :model="queryData"
        :rules="rules"
        size="mini"
        label-width="120px"
        label-position="left"
      >
        <el-col :span="14">
          <el-form-item label="类型" prop="unitType">
            <el-select
              v-model="queryData.unitType"
              placeholder="请选择类型"
              clearable
              filterable
              @change="changeUnit"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in unitTypeOptions"
                :key="v"
                :label="unitTypeOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="往来单位" prop="unitId">
            <el-select
              v-model="queryData.unitId"
              placeholder="请选择往来单位"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in unitOptions"
                :key="v"
                :label="unitOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="科目编号" prop="financeSubjectNo">
            <el-select
              v-model="queryData.financeSubjectNo"
              placeholder="请选择科目编号"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in subjectMap"
                :key="v"
                :label="subjectMap[v]"
                :value="v"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="期初余额" prop="initialBalanceMoney">
            <el-input
              v-model="queryData.initialBalanceMoney"
              placeholder="请输入期初余额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="本位币余额" prop="balanceMoney">
            <el-input
              v-model="queryData.balanceMoney"
              placeholder="请输入本位币余额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="币种代码" prop="currency">
            <el-select
              v-model="queryData.currency"
              placeholder="请选择币种代码"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in currencyOptions"
                :key="v"
                :label="currencyOptions[v]"
                :value="v"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="汇率转换期间" prop="period">
            <el-date-picker
              v-model="queryData.period"
              type="month"
              value-format="yyyy-MM"
              :style="{ width: '100%' }"
              placeholder="选择汇率转换期间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="14" style="margin-top:60px;">
          <el-form-item label="" prop="">
            <el-button
              type="primary"
              @click="submitEditSave"
              icon="el-icon-circle-check"
              size="mini"
            >
              保存
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  components: {},
  props: [],
  data() {
    return {
      fullscreenLoading: false,
      queryData: {
        unitType: undefined,
        unitId: undefined,
        initialBalanceMoney: undefined,
        currency: undefined,
        period: null
      },
      rules: {
        unitType: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change"
          }
        ],
        unitId: [
          {
            required: true,
            message: "请选择往来单位",
            trigger: "change"
          }
        ],
        financeSubjectNo: [
          {
            required: true,
            message: "请选择科目",
            trigger: "change"
          }
        ],

        initialBalanceMoney: [
          {
            required: true,
            message: "请输入期初余额",
            trigger: "blur"
          }
        ],

        currency: [
          {
            required: true,
            message: "请选择币种代码",
            trigger: "change"
          }
        ],
        period: [
          {
            required: true,
            message: "请选择汇率转换期间",
            trigger: "change"
          }
        ]
      },
      unitTypeOptions: {},
      unitOptions: {},
      currencyOptions: {},
      departMap: {},
      userMap: {},
      customerMap: {},
      subjectMap: {},
      serveCompanyMap: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initMap();
  },
  methods: {
    submitEditSave(status) {
      var unit = this.unitOptions[this.queryData.unitId];
      this.queryData.unit = unit;
      ajax("save", this.queryData).then(
        res => {
          if (res.code === 200) {
            this.$message.success("保存成功");
            console.log("保存成功");
            // setTimeout(() => {
            //   window.location.reload(true);
            // }, 3000);
          } else {
            if (res.message) {
              this.$message.error("保存失败:" + res.message);
            } else {
              this.$message.error("保存失败");
            }
          }
        },
        error => {
          console.log(error);
          this.$message.error("保存失败");
        }
      );
    },

    changeUnit() {
      console.log("当前选择了", this.queryData.unitType);
      if (this.queryData.unitType === 0) {
        this.unitOptions = this.departMap;
      } else if (this.queryData.unitType === 1) {
        this.unitOptions = this.userMap;
      } else if (this.queryData.unitType === 2) {
        this.unitOptions = this.customerMap;
      } else if (this.queryData.unitType === 3) {
        this.unitOptions = this.serveCompanyMap;
      }
    },
    initMap() {
      this.fullscreenLoading = true;
      var param = {};
      ajax("initMap", param).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code === 200) {
            this.currencyOptions = res.data.currencyMap;
            this.unitTypeOptions = res.data.unitTypeMap;
            this.departMap = res.data.departMap;
            this.userMap = res.data.userMap;
            this.customerMap = res.data.customerMap;
            this.serveCompanyMap = res.data.serveCompanyMap;
            this.subjectMap = res.data.subjectMap;
            const dataEntry = this.$store.state.edit.row;
            if (dataEntry) {
              this.queryData = dataEntry;
              this.changeUnit();
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>
<style></style>
